import React, { Component } from 'react'
import { Carousel, Row, Col } from "antd"
import { withRouter } from "react-router-dom"
import * as echarts from 'echarts';
import { ArrowRightOutlined, UserSwitchOutlined } from '@ant-design/icons';
import "./index.scss"

@withRouter
class HomeIndex extends Component {

    componentDidMount() {
        this.temperature()
    }
    temperature = () => {
        var chartDom = document.getElementById('box1');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            series: [{
                type: 'gauge',
                center: ["50%", "60%"],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 60,
                splitNumber: 12,
                itemStyle: {
                    color: '#FFAB91'
                },
                progress: {
                    show: true,
                    width: 30
                },

                pointer: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        width: 30
                    }
                },
                axisTick: {
                    distance: -45,
                    splitNumber: 5,
                    lineStyle: {
                        width: 2,
                        color: '#999'
                    }
                },
                splitLine: {
                    distance: -52,
                    length: 14,
                    lineStyle: {
                        width: 3,
                        color: '#999'
                    }
                },
                axisLabel: {
                    distance: -20,
                    color: '#999',
                    fontSize: 20
                },
                anchor: {
                    show: false
                },
                title: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    width: '60%',
                    lineHeight: 40,
                    height: '15%',
                    borderRadius: 8,
                    offsetCenter: [0, '-15%'],
                    fontSize: 60,
                    fontWeight: 'bolder',
                    formatter: '{value} °C',
                    color: 'auto'
                },
                data: [{
                    value: 20
                }]
            },

            {
                type: 'gauge',
                center: ["50%", "60%"],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 60,
                itemStyle: {
                    color: '#FD7347',
                },
                progress: {
                    show: true,
                    width: 8
                },

                pointer: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                detail: {
                    show: false
                },
                data: [{
                    value: 20,
                }]

            }
            ],
        };
        option && myChart.setOption(option);
    }
    gotoList=()=>{
        this.props.history.push("/main/anno/list")
    }
    gotoList1=()=>{
        this.props.history.push("/main/user/list")
    }
    gotoList2=()=>{
        this.props.history.push("/main/advise/list")
    }
    gotoList3=()=>{
        this.props.history.push("/main/mine")
    }
    render() {
        const contentStyle = {
            height: '300px',
            width:"100%",
        };
        return (
            <div>
                <div className="headers" style={{ textAlign: "center", fontSize: "30px", padding: "20px 0" }}> 欢迎来到丽岛超市 </div>
                <Carousel autoplay>
                    <div>
                    <img style={contentStyle} src={require("../../assets/images/banner1.jpg").default} alt=""/>

                    </div>
                    <div>
                        <img style={contentStyle} src={require("../../assets/images/banner2.jpg").default} alt=""/>
                    </div>
                    <div>
                    <img style={contentStyle} src={require("../../assets/images/banner3.jpg").default} alt=""/>

                    </div>
                    <div>
                    <img style={contentStyle} src={require("../../assets/images/banner4.jpg").default} alt=""/>

                    </div>
                </Carousel>

                <Row style={{ margin: "20px 0" }}>
                    <Col span={11} offset={1}>

                        <div className="box" id="box1" style={{ width: '100%', height: 400,textAlign:"center", border: '1px solid #ddd' }}></div>
                        <p style={{ textAlign: 'center' }}>  今日超市仓库温度</p>
                    </Col>
                    <Col span={11} offset={1}>
                        <div className="box" id="box2" style={{
                            width: '100%', height: 400, border: '1px solid #ddd',
                            display: "flex",
                            flexWrap: "wrap",
                            justifyContent: "space-between",
                            boxSizing: "border-box"
                        }}>
                            <div style={{ height: "200px", width: "50%", border: "1px solid #ddd", textAlign: "center" }}>   <p style={{ color: "#f00", marginTop: "40px", fontSize: "30px" }}>通告10条</p> <p onClick={this.gotoList} style={{ fontSize: "20px", cursor: "pointer" }}> <ArrowRightOutlined style={{ fontSize: "20px", border: "1px solid #000", borderRadius: "50%" }} />前往通告列表  </p> </div>
                            <div style={{ height: "200px", width: "50%", border: "1px solid #ddd", textAlign: "center" }}> <p style={{ color: "#f00", marginTop: "40px", fontSize: "30px" }}>用户10人</p> <p onClick={this.gotoList1} style={{ fontSize: "20px", cursor: "pointer" }}> <ArrowRightOutlined style={{ fontSize: "20px", border: "1px solid #000", borderRadius: "50%" }} />前往通告列表  </p></div>
                            <div style={{ height: "200px", width: "50%", border: "1px solid #ddd", textAlign: "center" }}><p style={{ color: "#f00", marginTop: "40px", fontSize: "30px" }}>意见10条</p> <p onClick={this.gotoList2} style={{ fontSize: "20px", cursor: "pointer" }}> <ArrowRightOutlined style={{ fontSize: "20px", border: "1px solid #000", borderRadius: "50%" }} />前往意见列表  </p></div>
                            <div style={{ height: "200px", width: "50%", border: "1px solid #ddd", textAlign: "center" }}>
                                <UserSwitchOutlined style={{ fontSize: "50px", marginTop: "50px", borderRadius: "50%" }} />
                                <p onClick={this.gotoList3} style={{ color: "#f00", cursor: "pointer" }}> <ArrowRightOutlined></ArrowRightOutlined>  前往用户中心</p>
                            </div>
                        </div>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default HomeIndex